@page "/maps/flight-route"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the flight routes from India to China.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render the curved lines between two points in a map using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html'>MapsNavigationLine</a></code>. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_DashArray'>DashArray</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Width'>Width</a></code>, and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Color'>Color</a></code> properties to customize the appearance of the navigation lines. Tooltip is enabled in this example.</p>
   <p> More information about navigation line can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/navigation-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsCenterPosition Latitude="30.41078179084589" Longitude="90.52734374999999" />
        <MapsZoomSettings Enable="false" ZoomFactor="3.5" />
        <MapsAreaSettings Background="#AEE2FA" />
        <MapsTitleSettings Text="Flights from India to China">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' ShapeDataPath="Name" ShapePropertyPath="@ShapePropertyPath" DataSource="@MapLayerDataSource" TValue="MapLayerData">
                <MapsShapeSettings Fill="#fcfbf9" ColorValuePath="Name">
                    <MapsShapeBorder Color="#000000" Width="0.1" />
                    <MapsShapeColorMappings>
                        <MapsShapeColorMapping Value="China" Color="@ShapeColorOne" />
                        <MapsShapeColorMapping Value="India" Color="@ShapeColorTwo" />
                    </MapsShapeColorMappings>
                </MapsShapeSettings>
                <MapsNavigationLines>
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 28.6139391, 39.9041999 }" Longitude="new double[] { 77.2090212, 116.4073963 }" />
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 28.6139391, 31.2303904 }" Longitude="new double[] { 77.2090212, 121.4737021 }" />
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 28.6139391, 23.12911 }" Longitude="new double[] { 77.2090212, 113.264385 }" />
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 28.6139391, 22.396428 }" Longitude="new double[] { 77.2090212, 114.109497 }" />
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 19.0759837, 23.12911 }" Longitude="new double[] { 72.8776559, 113.264385 }" />
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 13.0826802, 22.396428 }" Longitude="new double[] { 80.2707184, 114.109497 }" />
                    <MapsNavigationLine DashArray="5,1" Visible="true" Angle="-0.2" Color="#000000" Latitude="new double[] { 22.572646, 24.880095 }" Longitude="new double[] { 88.363895, 102.832891 }" />
                </MapsNavigationLines>
                <MapsMarkerSettings>
                    <MapsMarker DataSource="@FlightRouteCities" Visible="true" Shape="MarkerType.Circle" Fill="white" Width="4" TValue="City" AnimationDuration="0">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" />
                        <MapsMarkerBorder Width="1" Color="#000000" />
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@DelhiCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:-5px;margin-top:-10px">
                                    New Delhi
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@ChennaiCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:20px;margin-top:40px">
                                    Chennai
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@KolkataCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:20px;margin-top:40px">
                                    Kolkata
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@KunmingCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:20px;margin-top:50px">
                                    Kunming
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MumbaiCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:-60px;margin-top:40px">
                                    Mumbai
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@GuangzhouCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:60px;">
                                    Guangzhou
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@HongKongCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:20px;margin-top:50px">
                                    Hong Kong
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@ShanghaiCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:20px;margin-top:50px">
                                    Shanghai
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@BeijingCity" TValue="City">
                        <MarkerTemplate>
                            @{
                                <div style="margin-left:20px;margin-top:50px">
                                    Beijing
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://www.tibettravel.org/nepal-map/nepal-india-map.html" target="_blank">www.tibettravel.org</a>
    </div>
</div>


@code {
    public string[] ShapePropertyPath = { "name" };
    public string[] ShapeColorOne = { "#f7d083" };
    public string[] ShapeColorTwo = { "#FFFE99" };
    public class MapLayerData
    {
        public string Name { get; set; }
    };
    public List<MapLayerData> MapLayerDataSource = new List<MapLayerData> {
        new MapLayerData { Name="India"},
        new MapLayerData { Name="China" }
    };
    public class City
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    };
    public List<City> FlightRouteCities = new List<City> {
        new City { Name="New Delhi", Latitude=28.6139391, Longitude=77.2090212 },
        new City { Name="Mumbai", Latitude=19.0759837, Longitude=72.8776559 },
        new City { Name="Chennai", Latitude=13.0826802, Longitude=80.2707184 },
        new City { Name="Kolkata", Latitude=22.572646, Longitude=88.363895 },
        new City { Name="Kunming", Latitude=24.880095, Longitude=102.832891 },
        new City { Name="Beijing", Latitude=39.9041999, Longitude=116.4073963 },
        new City { Name="Shanghai", Latitude=31.2303904, Longitude=121.4737021 },
        new City { Name="Hong Kong", Latitude=22.396428, Longitude=114.109497 },
        new City {Name="Guangzhou", Latitude=23.12911, Longitude=113.264385 }
     };
    public List<City> ChennaiCity = new List<City> {
        new City { Name="Chennai", Latitude=13.0826802, Longitude=80.2707184}
    };
    public List<City> KolkataCity = new List<City> {
        new City { Name="Kolkata", Latitude=22.572646, Longitude=88.363895}
    };
    public List<City> KunmingCity = new List<City> {
        new City { Name="Kunming", Latitude=24.880095, Longitude=102.832891}
    };
    public List<City> BeijingCity = new List<City> {
        new City { Name="Beijing", Latitude=39.9041999, Longitude=116.4073963}
    };
    public List<City> DelhiCity = new List<City> {
        new City { Name="New Delhi", Latitude=28.6139391, Longitude=77.2090212}
    };
    public List<City> MumbaiCity = new List<City> {
        new City { Name="Mumbai", Latitude=19.0759837, Longitude=80.2707184}
    };
    public List<City> GuangzhouCity = new List<City> {
        new City { Name="Guangzhou", Latitude=23.12911, Longitude=113.264385}
    };
    public List<City> HongKongCity = new List<City> {
        new City { Name="Hong Kong", Latitude=22.396428, Longitude=114.109497}
    };
    public List<City> ShanghaiCity = new List<City> {
        new City { Name="Shanghai", Latitude=31.2303904, Longitude=121.4737021}
    };
}